<template>
  <div>
    <el-dialog :title="`工单评论(${total})`" :visible.sync="show" width="800px" append-to-body @close="cancel">
      <div>
        <div class="comment-list">
          <div v-for="(i, k) in dataList" :key="k" class="comment-item">
            <el-card shadow="always">
              <div class="comment-header">
                <el-avatar :src="baseURL + i.createUserAvatar" />
                <span>{{ i.createUserNickName }}</span>
                <el-tag size="mini">{{ i.createUserType | enumUserType }}</el-tag>
              </div>
              <div>{{ i.content }}</div>
              <div class="comment-time">{{ i.createTime }}</div>
            </el-card>
          </div>
          <div id="comment-bottom">
            <span @click="loadMore">{{
      total <= dataList.length ? "没有更多了" : "点击加载" }}</span>
          </div>
        </div>
        <div class="comment-footer">
          <el-input v-model="content" type="textarea" placeholder="请输入评论内容" @keyup.enter.native="handSend" :maxlength="200" show-word-limit />
          <el-button type="primary" @click="handSend" size="small" style="margin-left: 20px">
            发送
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { commentList, addComment } from "@/api/system/order";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => { },
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: [], // 评论列表
      total: 0, // 总条数
      content: "", // 评论内容
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    show(v) {
      if (v) {
        this.queryForm.pageNum = 1;
        this.queryForm.pageSize = 10;
        this.getList("init");
      } else {
        this.content = "";
      }
    },
  },
  methods: {
    // 查询操作记录列表
    getList(v) {
      commentList(this.row.id ? this.row.id : this.row.workOrderId, this.queryForm).then((res) => {
        if (res.code == 200) {
          this.dataList =
            this.queryForm.pageNum == 1 ? res.rows : this.dataList.concat(res.rows);
          this.total = res.total;
          if (v != "init") {
            setTimeout(() => {
              let temp = document.getElementById("comment-bottom");
              temp.scrollIntoView({ block: "start", behavior: "smooth" });
            }, 0);
          }
        }
      });
    },
    // 加载更多
    loadMore() {
      if (this.total > this.dataList.length) {
        this.queryForm.pageNum++;
        this.getList();
      }
    },
    // 发送评论
    handSend() {
      if (!this.content) {
        this.$modal.msgError("请输入评论内容");
        return;
      }
      addComment({
        content: this.content,
        maintenanceWorkOrderId: this.row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("评论成功");
          this.queryForm.pageNum = 1;
          this.queryForm.pageSize = this.total + 1;
          this.content = "";
          this.getList();
        }
      });
    },
    // 关闭弹窗
    cancel() {
      this.show = false;
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.comment-list {
  max-height: 500px;
  overflow-y: auto;

  .comment-item {
    margin-bottom: 10px;

    .comment-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }
    }

    .comment-time {
      display: flex;
      justify-content: flex-end;
      color: #757575;
    }
  }

  #comment-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 40px;

    span:hover {
      cursor: pointer;
    }
  }
}

.comment-footer {
  display: flex;
  align-items: center;
}
</style>
